<template>
    <div>
      <v-card>
        <v-card-title>
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="搜索"
            single-line
            hide-details
            clearable
          />
        </v-card-title>
        
        <v-data-table
          :headers="headers"
          :items="textItems"
          :search="search"
          :loading="loading"
          :items-per-page="10"
          multi-sort
        >
          <template v-slot:item.content="{ item }">
            <v-tooltip location="top">
              <template v-slot:activator="{ props }">
                <span v-bind="props" class="text-truncate" style="max-width: 300px; display: inline-block;">
                  {{ truncate(item.content, 50) }}
                </span>
              </template>
              <span>{{ item.content }}</span>
            </v-tooltip>
          </template>
          
          <template v-slot:item.actions="{ item }">
            <v-btn
              icon
              size="small"
              @click="viewText(item)"
            >
              <v-icon>mdi-eye</v-icon>
            </v-btn>
            <v-btn
              icon
              size="small"
              @click="downloadText(item)"
            >
              <v-icon>mdi-download</v-icon>
            </v-btn>
          </template>
        </v-data-table>
      </v-card>
      
      <v-dialog v-model="dialog" max-width="800px">
        <v-card>
          <v-card-title>文本详情</v-card-title>
          <v-card-text>
            <v-textarea
              v-model="selectedText.content"
              readonly
              auto-grow
              rows="10"
            />
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <v-btn color="primary" @click="dialog = false">关闭</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useDataStore } from '@/stores/data'
  
  const dataStore = useDataStore()
  const loading = ref(false)
  const search = ref('')
  const dialog = ref(false)
  const selectedText = ref({ id: '', content: '' })
  
  const headers = [
    { title: 'ID', key: 'id', width: '100px' },
    { title: '来源', key: 'source' },
    { title: '爬取时间', key: 'crawlTime' },
    { title: '内容', key: 'content' },
    { title: '操作', key: 'actions', sortable: false }
  ]
  
  const textItems = ref([])
  
  onMounted(async () => {
    loading.value = true
    await dataStore.fetchTexts()
    textItems.value = dataStore.texts
    loading.value = false
  })
  
  function truncate(text: string, length: number) {
    return text.length > length ? text.substring(0, length) + '...' : text
  }
  
  function viewText(item: any) {
    selectedText.value = { ...item }
    dialog.value = true
  }
  
  function downloadText(item: any) {
    const blob = new Blob([item.content], { type: 'text/plain' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `text_${item.id}.txt`
    a.click()
    URL.revokeObjectURL(url)
  }
  </script>